<template>
  <div class="mar-t--25" ref="formAll">
    <el-form :model="form" label-width="130px" :rules="rules" ref="form" class="pad-t-15 mar-r--30">
      <el-form-item :label="contentInfo.labelName" class="one-label">
        <div class="pad-content" style="overflow: auto;">
          <!-- <div class="text-align-c mar-r-27">
            <div class="tips-top">温馨提示：必须设置基本信息才能发布哦！使用一键采集后将覆盖您编辑框内的内容，请注意使用。</div>
          </div> -->
          <slot name="tabbar"></slot>
          <div class="flex">
            <div class="menu-panel border-all border-radius-5">
              <div class="pad-l-16 pad-r-16">
                <div class="panel-m-title">组件库</div>
                <el-collapse v-model="oneNames" class="collapse-bar mar-b-18">
                  <el-collapse-item title="图文类" name="1">
                    <div class="pad-t-8 pad-b-8">
                      <div class="flex text-align-c one-simple">
                        <!-- 批量上传 -->
                        <div v-if="showBatchUploadBtn" class="flex-item font-16 cursor-p" @click="dialogVisible=true">
                          <img :src="iconPanel[8].icon" width="30" border="0px">
                          <div class="mar-t--6">批量上传</div>
                        </div>
                        <div class="flex-item font-16 cursor-p" @click="addForm(12)">
                          <img :src="iconPanel[1].icon" width="30" border="0px">
                          <div class="mar-t--6">图片</div>
                        </div>
                      </div>
                      <div class="flex text-align-c one-simple">
                        <div v-if="showRichTextBtn" class="flex-item font-16 cursor-p" @click="addForm(11)">
                          <img :src="iconPanel[0].icon" width="30" border="0px">
                          <div class="mar-t--6">富文本</div>
                        </div>
                        <div v-if="showVideoBtn" class="flex-item font-16 cursor-p" @click="addForm(16)">
                          <img :src="iconPanel[3].icon" width="30" border="0px">
                          <div class="mar-t--6">视频</div>
                        </div>
                      </div>
                      <!-- <div class="flex text-align-c one-simple">
                        <div class="flex-item font-16 cursor-p" @click="addForm(17)">
                          <img :src="iconPanel[2].icon" width="30" border="0px">
                          <div class="mar-t--6">音频</div>
                        </div>
                        <div class="flex-item font-16 cursor-p" @click="addForm(14)" v-if="formFlag === '0'">
                          <img :src="iconPanel[7].icon" width="30" border="0px">
                          <div class="mar-t--6">表单</div>
                        </div>
                        <div class="flex-item font-16" v-else>
                          <div class="mar-t--6">&nbsp;</div>
                        </div>
                      </div> -->
                    </div>
                    
                  </el-collapse-item>
                </el-collapse>
                <!-- 下载PSD模板 -->
                <el-button v-if="!showVideoBtn" @click="doDownloadTemplate">下载素材PSD模板</el-button>
              </div>
            </div>
            <div class="flex-item diy-bg-main">
              <div class="diy-phone diy-bg-box" v-if="contentInfo">
                <div class="phone-head"></div>
                <div class="phone-body">
                  <div class="phone-title border-b" id="page"></div>
                  <div class="phone-t-info pad-t-8" v-if="formFlag === '0'">
                    <h3>{{ contentInfo.title }}</h3>
                    <p>作者: {{ contentInfo.authorName }}</p>
                  </div>
                  <div class="phone-main main-box"></div>
                </div>
                <div class="phone-foot"></div>
              </div>
              <div class="clearfix diy-box" :class="formFlag === '1' ? 'goods-diy-box':''">
                <div>
                  <div class="diy-phone none-border">
                    <div class="ui-sortable">
                      <!-- {{listDetails}} -->
                      <draggable class="content-box" v-model="listDetails" dragable="true" :move="getdata" @update="datadragEnd">
                        <template v-for="(item, index) in listDetails">
                          <!-- 文本预览 -->
                          <!-- {{item}} -->
                          <template v-if="item.authorType === 11">
                            <div class="drag-box" :id="'text-'+item.sortNo" :key="'text-'+index">
                              <div class="drag" :class="item.show ? 'selected':''" @click="formEls(item)">
                                <div class="diy-content text-valign-l" :style="'background-color:'+ item.backColor+';padding: '+ item.upperLowerMargins+'px '+ item.sideMargin+'px;'">
                                  <!--<div :class="item.textDTO.textSize+' '+item.textDTO.textAlign+' '-->
                                  <!--+item.textDTO.textColor+' '+item.textDTO.textShape+' '+item.textDTO.textColor">{{item.textDTO.content}}</div>-->
                                  <div v-html="item.textDTO.content" v-if="item.textDTO.content" class="richArea"></div>
                                  <div v-else class="text-valign-c">
                                    <p style="margin-top: 50px">这里是文章文本输入区！</p>
                                    <p>这里是文章文本输入区！</p>
                                    <p>这里是文章文本输入区！</p>
                                  </div>
                                </div>
                              </div>
                              <div class="btn-edit-del">
                                <div class="btn-del" @click="remove(item)">删除</div>
                              </div>
                            </div>
                          </template>
                          <!-- 图片预览 -->
                          <template v-else-if="item.authorType === 12">
                            <div class="drag-box" :id="'picture-'+item.sortNo" :key="'picture-'+index">
                              <div class="drag" :class="item.show ? 'selected':''" @click="formEls(item)">
                                <div class="diy-content" v-if="item.pictureDTO.imgUrl"
                                  :style="'background-color:'+ item.backColor+';padding: '+ item.upperLowerMargins+'px 0px;'">
                                  <img :src="item.pictureDTO.imgUrl" :style="'width: 100%; padding: 0px '+ item.sideMargin+'px;'">
                                </div>
                                <div class="diy-content picture-default" v-else>
                                  <img :src="pictureDefault" border="0px">
                                </div>
                              </div>
                              <div class="btn-edit-del">
                                <div class="btn-del" @click="remove(item)">删除</div>
                              </div>
                            </div>
                          </template>
                          <!-- 商品预览 -->
                          <template v-else-if="item.authorType === 13">
                            <!-- {{ item }} -->
                            <div class="drag-box" :id="'goods-'+item.sortNo" :key="'goods-'+index">
                              <div class="drag" :class="item.show ? 'selected':''" @click="formEls(item)">
                                <template v-for="(itemGoods, index) in item.componentGoodsDTOS">
                                  <div class="diy-goods pos-rel" :class="item.listStyle == 2 ? 'width-per-50' : 'width-per-100' " :key="index"
                                    :style="'background-color:'+ item.backColor+';padding: '+ item.upperLowerMargins+'px 0px;'">
                                    <div v-if="itemGoods.sellType === 0" class="sell-out">
                                      <div class="out-bar"><span>已售空</span></div>
                                    </div>
                                    <div style="width: 100%; height: 145px; background: #e7e7e7;">
                                      <img v-if="itemGoods.imgUrl" :src="itemGoods.imgUrl" style="width: 100%; height: 100%">
                                    </div>
                                    <p>{{itemGoods.title}}</p>
                                    <div class="flex v-align-c price-bar">
                                      <span class="flex-item">￥{{ itemGoods.price }}</span>
                                      <label>购买</label>
                                    </div>
                                  </div>
                                </template>
                                <template v-if="item.componentGoodsDTOS.length === 0">
                                  <template v-for="(itemList, index) in Number(item.listStyle)">
                                    <div class="diy-goods pos-rel" :key="index" :class="item.listStyle === '2' ? 'width-per-50' : 'width-per-100' ">
                                      <div class="goods-default">
                                        <img :src="goodsDefault" border="0px">
                                      </div>
                                      <p>这里是商品标题</p>
                                      <div class="flex v-align-c price-bar">
                                        <span class="flex-item">￥100</span>
                                        <label>购买</label>
                                      </div>
                                    </div>
                                  </template>
                                </template>
                              </div>
                              <div class="btn-edit-del">
                                <div class="btn-del" @click="remove(item)">删除</div>
                              </div>
                            </div>
                          </template>
                          <!-- 视频预览 -->
                          <template v-else-if="item.authorType === 16">
                            <div class="drag-box" :id="'video-'+item.sortNo" :key="'video-'+index">
                              <div class="drag" :class="item.show ? 'selected':''" @click="formEls(item)">
                                <div class="diy-content" :style="'background-color:'+ item.backColor+';padding: '+ item.upperLowerMargins+'px 0px;'">
                                  <video controls="controls" height="200px"
                                    :class="'video-w-' + item.componentVideoDTO.videoStyle"
                                    v-if="item.componentVideoDTO.videoUrl" :src="item.componentVideoDTO.videoUrl">
                                    <source type="video/mp4">
                                    Your browser does not support the video tag.
                                  </video>
                                  <img v-else :src="videoDefault" border="0px">
                                </div>
                              </div>
                              <div class="btn-edit-del">
                                <div class="btn-del" @click="remove(item)">删除</div>
                              </div>
                            </div>
                          </template>
                          <!-- 音频预览 -->
                          <template v-else-if="item.authorType === 17">
                            <div class="drag-box" :id="'audio-'+item.sortNo" :key="'audio-'+index">
                              <div class="drag" :class="item.show ? 'selected':''" @click="formEls(item)">
                                <div class="diy-content audio-box" :style="'background-color:'+ item.backColor+';padding: '+ item.upperLowerMargins+'px 0px;'">
                                  <div class="audio-bar flex">
                                    <audio :id="'audioFile-'+item.sortNo" v-show="false" :src="item.audioDTO.audioUrl"></audio>
                                    <img :src="audioDefault" width="65" height="65" border="0px">
                                    <div class="flex-item">
                                      <h5>{{ item.audioDTO.title ? item.audioDTO.title : '未定义音频标题' }}</h5>
                                      <p>{{ item.audioDTO.subtitle ? item.audioDTO.subtitle : '副标题' }}</p>
                                    </div>
                                    <span class="pad-t-10 pad-r-10">{{ item.audioDTO.autoDuration }}</span>
                                  </div>
                                </div>
                              </div>
                              <div class="btn-edit-del">
                                <div class="btn-del" @click="remove(item)">删除</div>
                              </div>
                            </div>
                          </template>
                          <!-- 表单预览 -->
                          <template v-else-if="item.authorType === 14">
                            <div class="drag-box input-box" :id="'input-'+item.sortNo" :key="'input-'+index">
                              <div class="drag" :class="item.show ? 'selected':''" @click="formEls(item)">
                                <div class="diy-content" :style="'background-color:'+ item.backColor+''">
                                  <div class="pad-t-10 pad-b-10 font-w">{{ item.formDTO.title }}</div>
                                  <template v-if="item.formDTO.formDetailDTOS.length > 0" v-for="(itemDetail, index) in item.formDTO.formDetailDTOS">
                                    <div class="input-show-bar font-12 pad-b-10">
                                      <p>
                                        <span class="font-red" v-if="itemDetail.needFlag.toString() === '1'">*</span>
                                        {{ itemDetail.formName }}
                                      </p>
                                      <el-input :placeholder="itemDetail.tipsName"/>
                                    </div>
                                  </template>
                                  <div class="pad-b-15">
                                    <el-button class="width-per-100 font-white font-16" size="small" :style="'background-color:'+ item.formDTO.buttonColor+''">{{ item.formDTO.buttonName }}</el-button>
                                  </div>
                                </div>
                              </div>
                              <div class="btn-edit-del">
                                <div class="btn-del" @click="remove(item)">删除</div>
                              </div>
                            </div>
                          </template>
                          <!-- 辅助空白预览组件 -->
                          <template v-else-if="item.authorType === 10">
                            <div class="drag-box" :id="'space-'+item.sortNo" :key="'space-'+index">
                              <div class="drag" :class="item.show ? 'selected':''" @click="formEls(item)">
                                <div class="diy-content"></div>
                              </div>
                              <div class="btn-edit-del">
                                <div class="btn-del" @click="remove(item)">删除</div>
                              </div>
                            </div>
                          </template>
                        </template>
                      </draggable>
                    </div>
                  </div>
                  <div class="diy-editor form-horizontal"
                    v-show="boxFormBoolean">
                    <div class="inner">
                      <div class="form-richtext">
                        <div class="edui-default">
                          <div class="edui-editor edui-default">
                            <!-- 文本表单组件 -->
                            <vue-ueditor-wrap v-if="type === 11" ref="editor" style="width: 100%;line-height: 22px;" :eventId="eventId" v-model="details.textDTO.content" :config="ueConfig"></vue-ueditor-wrap>
                            <!-- 图片表单组件 -->
                            <component-picture-form v-if="type === 12" :details1="details" :eventId="eventId"></component-picture-form>
                            <!-- 商品表单组件 -->
                            <component-goods-form v-if="type === 13" @scrollBottom="scrollBottom" :details1="details" :eventId="eventId"></component-goods-form>
                            <!-- 视频表单组件 -->
                            <component-video-form v-if="type === 16" :details1="details" :eventId="eventId"></component-video-form>
                            <!-- 音频表单组件 -->
                            <component-audio-form v-if="type === 17" :details1="details" :eventId="eventId"></component-audio-form>
                            <!-- 表单组件 -->
                            <component-input-form v-if="type === 14" @scrollBottom="scrollBottom" :details1="details" :eventId="eventId"></component-input-form>
                            <!-- 辅助空白表单组件 -->
                            <component-space-form v-if="type === 10" :details1="details" :eventId="eventId"></component-space-form>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </el-form-item>
    </el-form>
    <multi-file-upload :dialogVisible="dialogVisible" action="/api/common/uploadFiles" :data="token" :onConfirm="addMultiFiles" :onCancel="hideMultiFileUpload"></multi-file-upload>
  </div>
</template>

<script>
  import elDragDialog from '@/directive/el-dragDialog'
  import BackToTop from '@/components/BackToTop'
  import ComponentPictureForm from '@/components/ComponentTemplate/ComponentPictureForm'
  import ComponentTextForm from '@/components/ComponentTemplate/ComponentTextForm'
  import ComponentGoodsForm from '@/components/ComponentTemplate/ComponentGoodsForm'
  import ComponentVideoForm from '@/components/ComponentTemplate/ComponentVideoForm'
  import ComponentAudioForm from '@/components/ComponentTemplate/ComponentAudioForm'
  import ComponentInputForm from '@/components/ComponentTemplate/ComponentInputForm'
  import ComponentSpaceForm from '@/components/ComponentTemplate/ComponentSpaceForm'
  import MultiFileUpload from '@/components/Upload/MultiFileUpload'
  import { getTemplateList, saveTemplate } from '@/api/componentTemplate/template'
  import iconPanel1 from '@/assets/images/panel-1.png'
  import iconPanel2 from '@/assets/images/panel-2.png'
  import iconPanel3 from '@/assets/images/panel-3.png'
  import iconPanel4 from '@/assets/images/panel-4.png'
  import iconPanel5 from '@/assets/images/panel-5.png'
  import iconPanel6 from '@/assets/images/panel-6.png'
  import iconPanel7 from '@/assets/images/panel-7.png'
  import iconPanel8 from '@/assets/images/panel-8.png'
  import iconPanel9 from '@/assets/images/panel-9.png'
  import pictureDefault from '@/assets/images/picture.png'
  import videoDefault from '@/assets/images/video.png'
  import audioDefault from '@/assets/images/audio.png'
  import goodsDefault from '@/assets/images/goods.png'
  import draggable from 'vuedraggable'
  import { getToken } from '@/utils/auth'
  import VueUeditorWrap from 'vue-ueditor-wrap'
  import { getByEnterpriseId } from '@/api/user/enterprise'
  import { downloadFile } from '@/api/common/common'

  export default {
    components: {
      ComponentPictureForm,
      ComponentTextForm,
      ComponentGoodsForm,
      ComponentVideoForm,
      ComponentAudioForm,
      ComponentInputForm,
      ComponentSpaceForm,
      MultiFileUpload,
      BackToTop,
      draggable,
      VueUeditorWrap
    },
    directives: {
      // 拖动窗口
      elDragDialog
    },
    props: {
      templateId: {
        type: String
      },
      contentInfo: {
        type: Object,
        default: {
          labelName: '内容详情'
        }
      },
      formFlag: {
        type: String,
        default: '0'
      },
      showBatchUploadBtn: {
        type: Boolean,
        default: true
      },
      showRichTextBtn: {
        type: Boolean,
        default: true
      },
      showVideoBtn: {
        type: Boolean,
        default: true
      },
      eventId: {
        type: String,
        default: ''
      }
    },
    data() {
      return {
        token: '',
        fileLoading: false,
        sortNo: 0,
        type: 0,
        enterpriseConfig: {},
        title: '',
        authorName: '',
        form: {
          sortNo: 0,
          goodsName: '',
          category: '',
          type: [],
          resource: ''
        },
        template: {
          templateId: this.templateId,
          enterpriseId: this.getEnterpriseId(),
          articleType: 11,
          listDetails: []
        },
        details: {
          detailsId: '',
          templateId: '',
          sortNo: 0,
          authorType: 0,
          upperLowerMargins: 0,
          sideMargin: 0,
          backColor: '',
          textDTO: {
            textId: '',
            detailsId: '',
            content: '',
            textSize: '',
            textShape: '',
            textAlign: '',
            textColor: ''
          },
          pictureDTO: {
            pictureId: '',
            detailsId: '',
            imgUrl: '',
            imgWidth: '',
            imgHeight: ''
          },
          componentGoodsDTOS: [],
          audioDTO: {
            audioId: '',
            detailsId: '',
            title: '',
            subtitle: '',
            loopPlayback: '0',
            autoPlayback: '0',
            autoDuration: ''
          },
          componentVideoDTO: {
            videoId: '',
            detailsId: '',
            videoStyle: '1',
            videoImg: '',
            videoName: '',
            videoUrl: ''
          },
          formDTO: {
            componentFormId: '',
            detailsId: '',
            title: '联系我们',
            buttonName: '确定提交',
            buttonColor: '#409EFF',
            formDetailDTOS: []
          },
          sellType: '0',
          listStyle: '1'
        },
        componentGoods: {
          componentGoodsId: '',
          detailsId: '',
          goodsSortNo: '',
          imgUrl: '',
          imgWidth: '',
          imgHeight: ''
        },
        rules: {
          goodsName: [
            { required: true, message: '请填写商品名称', trigger: 'blur' }
          ]
        },
        pictureFormData: null,
        textFormData: null,
        goodsFormData: null,
        videoFormData: null,
        audioFormData: null,
        inputFormData: null,
        spaceFormData: null,
        scrollNumber: 0,
        listDetails: [],
        itemIndex: null,
        boxFormBoolean: false,
        fetchVisible: false,
        url: '',
        urlType: '1',
        urlTypes: {
          '1': '微信公众号',
          '2': '今日头条'
        },
        loading: '',
        oneNames: ['1'],
        twoNames: ['1'],
        threeNames: ['1'],
        iconPanel: [
          { icon: iconPanel1 },
          { icon: iconPanel2 },
          { icon: iconPanel3 },
          { icon: iconPanel4 },
          { icon: iconPanel5 },
          { icon: iconPanel6 },
          { icon: iconPanel7 },
          { icon: iconPanel8 },
          { icon: iconPanel9 }
        ],
        pictureDefault: pictureDefault,
        videoDefault: videoDefault,
        audioDefault: audioDefault,
        goodsDefault: goodsDefault,
        dialogVisible: false,
        ueConfig: {
          toolbars: [['source', 'undo', 'fontsize', 'paragraph', '|', 'bold', 'italic', 'underline', 'strikethrough', 'forecolor', 'backcolor', 'justifyleft', 'justifycenter', 'justifyright', 'insertorderedlist', 'insertunorderedlist', 'blockquote', '|', 'rowspacingtop', 'rowspacingbottom', 'lineheight', '|', 'simpleupload', 'removeformat', 'inserttable', 'deletetable', 'insertrow', 'deletecol', 'insertcol', 'deleterow', 'mergecells', 'mergeright', 'mergedown', 'splittocells', 'splittorows', 'splittocols']],
          // 初始容器高度
          initialFrameHeight: 300,
          // 初始容器宽度
          initialFrameWidth: '100%'
        }
      }
    },
    watch: {
      'type'(val) {
        this.type = val
        if (val) {
          this.boxFormBoolean = true
        }
      }
    },
    mounted() {
      if (!this.contentInfo.labelName) {
        this.contentInfo.labelName = '内容详情'
      }
      const that = this
      // 文本表单值设置
      this.$bus.$on('textFormData' + this.eventId, function(data) {
        that.listDetails[data.sortNo] = data
      })
      // 图片表单值设置
      this.$bus.$on('pictureFormData' + this.eventId, function(data) {
        that.listDetails[data.sortNo] = data
      })
      // 商品表单值设置
      this.$bus.$on('goodsFormData' + this.eventId, function(data) {
        that.listDetails[data.sortNo] = data
      })
      // 视频表单值设置
      this.$bus.$on('videoFormData' + this.eventId, function(data) {
        that.listDetails[data.sortNo] = data
      })
      // 音频表单值设置
      this.$bus.$on('audioFormData' + this.eventId, function(data) {
        setTimeout(() => {
          that.listDetails[data.sortNo] = data
          const audio = document.getElementById('audioFile-' + data.sortNo)
          let secondTime = parseInt(audio.duration)// 秒
          let minuteTime = 0
          let hourTime = 0
          if (secondTime > 60) {
            minuteTime = parseInt(secondTime / 60)
            secondTime = parseInt(secondTime % 60)
            if (minuteTime > 60) {
              hourTime = parseInt(minuteTime / 60)
              minuteTime = parseInt(minuteTime % 60)
            }
          }
          // 时处理
          if (hourTime === 0) {
            hourTime = '00:'
          } else if (hourTime > 0 && hourTime < 10) {
            hourTime = '0' + hourTime + ':'
          } else {
            hourTime = hourTime + ':'
          }
          // 分处理
          if (minuteTime === 0) {
            minuteTime = '00:'
          } else if (minuteTime > 0 && minuteTime < 10) {
            minuteTime = '0' + minuteTime + ':'
          } else {
            minuteTime = minuteTime + ':'
          }
          // 秒处理
          if (secondTime === 0) {
            secondTime = '00'
          } else if (secondTime > 0 && secondTime < 10) {
            secondTime = '0' + secondTime + ''
          } else {
            secondTime = secondTime + ''
          }
          that.listDetails[data.sortNo].audioDTO.autoDuration = hourTime + minuteTime + secondTime
        }, 100)
      })
      // 表单设置
      this.$bus.$on('inputFormData' + this.eventId, function(data) {
        that.listDetails[data.sortNo] = data
      })
      // 辅助空白表单值设置
      this.$bus.$on('spaceFormData' + this.eventId, function(data) {
        that.listDetails[data.sortNo] = data
      })
      // 删除表单值设置
      this.$bus.$on('removeIndex' + this.eventId, function(data) {
        that.itemIndex = data
        that.listDetails.splice(that.itemIndex, 1)
      })
      // 接收templateId
      this.$bus.$on('ComponentDetails.edit.getTemplateId' + this.eventId, function(templateId) {
        if (that.$utils.isExist(templateId)) {
          getTemplateList(templateId).then(response => {
            if (response.isError) return
            that.listDetails = response.data
            that.template.templateId = templateId
          })
        }
      })
    },
    // 初始化页面
    created() {
      this.token = { accessToken: getToken() }
      if (this.templateId) {
        this.initTemplate(this.templateId)
      }
      this.initEnterpriseConfig()
    },
    methods: {
      initTemplate(templateId) {
        if (!templateId) {
          return
        }
        this.template.templateId = templateId
        getTemplateList(this.template.templateId).then(response => {
          if (response.isError) return
          this.listDetails = response.data
          if (this.listDetails.length > 0 && this.listDetails[0]['textDTO']) {
            this.listDetails[0]['textDTO']['content'] = this.listDetails[0]['textDTO']['content'].replace(/src=/g, 'style="max-width:100%" src=')
          }
        })
      },
      initEnterpriseConfig() {
        getByEnterpriseId(this.getEnterpriseId()).then(response => {
          if (response.isError) return
          this.enterpriseConfig = response.data
        })
      },
      addForm(type, status) {
        this.boxFormBoolean = true
        if (this.listDetails.length > 0) {
          this.sortNo = this.listDetails[this.listDetails.length - 1].sortNo + 1
        }
        this.type = type
        let fromNum = 0
        this.resetDetails()
        if (type === 11) {
          // 文本模块添加
          this.details.scrollNumber = this.$el.querySelector('.content-box').scrollHeight + 95
          this.$bus.$emit('resetDetailsText' + this.eventId, this.details)
        } else if (type === 12) {
          // 图片模块添加
          this.details.scrollNumber = this.$el.querySelector('.content-box').scrollHeight + 95
          this.$bus.$emit('resetDetails' + this.eventId, this.details)
        } else if (type === 10) {
          // 辅助空白模块添加
          this.details.scrollNumber = this.$el.querySelector('.content-box').scrollHeight + 88
          this.$bus.$emit('resetDetailsSpace' + this.eventId, this.details)
        } else if (type === 13) {
          this.details.listStyle = status
          // 商品模块添加
          this.details.scrollNumber = this.$el.querySelector('.content-box').scrollHeight + 95
          this.$bus.$emit('resetDetailsGoods' + this.eventId, this.details)
        } else if (type === 16) {
          // 视频模块添加
          this.details.scrollNumber = this.$el.querySelector('.content-box').scrollHeight + 95
          this.$bus.$emit('resetDetailsVideo' + this.eventId, this.details)
        } else if (type === 14) {
          // if (this.listDetails.) formDTO
          this.listDetails.forEach(e => {
            if (e.formDTO) {
              fromNum = 1
            }
          })
          if (fromNum === 0) {
            // 表单模块添加
            this.details.scrollNumber = this.$el.querySelector('.content-box').scrollHeight + 95
            this.$bus.$emit('resetDetailsInput' + this.eventId, this.details)
          } else {
            this.$message.error('已存在表单，无需重复添加')
          }
        } else if (type === 17) {
          // 音频模块添加
          this.details.scrollNumber = this.$el.querySelector('.content-box').scrollHeight + 95
          this.$bus.$emit('resetDetailsAudio' + this.eventId, this.details)
        }
        if (fromNum === 0) {
          this.details.sortNo = this.sortNo
          this.details.authorType = type
          for (let i = 0; i < this.listDetails.length; i++) {
            this.listDetails[i].show = false
          }
          this.details.show = true
          this.listDetails.push(this.details)
          this.sortNo += 1
          this.scrollBottom()
        }
      },
      scrollBottom() {
        this.$nextTick(() => {
          const container = this.$el.querySelector('.diy-box')
          container.scrollTop = container.scrollHeight
        })
      },
      /**
       * 表单提交
       * @param status              0文章分发组建模板  1商品组建模板
       * @param eventName           事件名称
       * @param componentType       组件类型 componentDetail:商品详情 componentAnchorDetail:助播素材
       */
      submit(status, eventName, componentType, needSaveGoods) {
        const that = this
        let isSuccess = true
        if (this.listDetails.length > 0) {
          const filters = this.listDetails
          for (let a = 0; a < filters.length; a++) {
            filters[a].index = a
            filters[a].sortNo = a
            if (filters[a].authorType === 11) {
              if (filters[a].textDTO.content === '') {
                this.$message.error('文本内容不能为空')
                this.$bus.$emit('disabledButtonEmit' + this.eventId)
                return
              }
            }
            if (filters[a].authorType === 12) {
              if (filters[a].pictureDTO.imgUrl === '') {
                this.$message.error('图片不能为空')
                this.$bus.$emit('disabledButtonEmit' + this.eventId)
                return
              }
            }
            if (filters[a].authorType === 13) {
              if (filters[a].componentGoodsDTOS.length > 0) {
                filters[a].componentGoodsDTOS.forEach(e => {
                  if (!e.imgUrl || e.goodsId === '') {
                    this.$message.error('商品不能为空')
                    this.$bus.$emit('disabledButtonEmit' + this.eventId)
                    isSuccess = false
                    return
                  }
                })
              } else {
                this.$message.error('请添加商品')
                this.$bus.$emit('disabledButtonEmit' + this.eventId)
                isSuccess = false
                return
              }
            }
            if (filters[a].authorType === 16) {
              if (!filters[a].componentVideoDTO.videoUrl) {
                this.$message.error('视频不能为空')
                this.$bus.$emit('disabledButtonEmit' + this.eventId)
                return
              }
            }
            if (filters[a].authorType === 17) {
              if (!filters[a].audioDTO.audioUrl) {
                this.$message.error('音频不能为空')
                this.$bus.$emit('disabledButtonEmit' + this.eventId)
                return
              }
              if (filters[a].audioDTO.title.length > 12) {
                this.$message.error('音频标题长度不能大于12个字')
                this.$bus.$emit('disabledButtonEmit' + this.eventId)
                return
              }
            }
            if (filters[a].authorType === 14) {
              if (filters[a].formDTO.formDetailDTOS.length === 0) {
                this.$message.error('表单不能为空')
                this.$bus.$emit('disabledButtonEmit' + this.eventId)
                isSuccess = false
                return
              } else {
                filters[a].formDTO.formDetailDTOS.forEach(e => {
                  if (e.formName === '' || e.formName === undefined) {
                    this.$message.error('表单字段名称不能为空')
                    this.$bus.$emit('disabledButtonEmit' + this.eventId)
                    isSuccess = false
                    return
                  }
                })
              }
            }
          }
          if (isSuccess) {
            this.listDetails = filters
            // 保存模板
            this.template.listDetails = this.listDetails
            saveTemplate(this.template).then(response => {
              if (response.isError) return
              const templateId = response.data
              if (!eventName) {
                that.$bus.$emit('ComponentTemplate.templateId.content', templateId)
              } else {
                that.$bus.$emit(eventName, {
                  templateId: templateId,
                  componentType: componentType,
                  needSaveGoods: needSaveGoods
                })
              }
            })
          }
        } else {
          if (status === 0) {
            this.$message.error('请编辑文章详情')
          }
          if (status === 1) {
            // 保存模板
            this.template.listDetails = []
            saveTemplate(this.template).then(response => {
              if (response.isError) return
              const templateId = response.data
              if (!eventName) {
                that.$bus.$emit('ComponentTemplate.templateId.content', templateId)
              } else {
                that.$bus.$emit(eventName, {
                  templateId: templateId,
                  componentType: componentType,
                  needSaveGoods: needSaveGoods
                })
              }
            })
          }
        }
      },
      // 下载助播素材模板
      doDownloadTemplate() {
        downloadFile('https://enterpriseimg.joinsun.vip/goods/anchor_template.psd', {}, '助播素材模板')
      },
      remove(item) {
        this.listDetails.splice(item.sortNo, 1)
        const listDetailsCopy = []
        for (let i = 0; i < this.listDetails.length; i++) {
          this.listDetails[i].sortNo = i
          listDetailsCopy.push(this.listDetails[i])
        }
        this.listDetails = listDetailsCopy
        this.boxFormBoolean = false
      },
      formEls(item) {
        // 当前的状态
        this.boxFormBoolean = true
        this.details.scrollNumber = 0
        this.type = item.authorType
        this.details = item
        for (let i = 0; i < this.listDetails.length; i++) {
          this.listDetails[i].show = false
        }
        this.details.show = true
        if (this.type === 11) {
          // 文本模块
          this.details.scrollNumber = this.$el.querySelector('#text-' + item.sortNo).offsetTop
          this.$bus.$emit('resetDetailsText' + this.eventId, this.details)
        } else if (this.type === 12) {
          // 图片模块
          this.details.scrollNumber = this.$el.querySelector('#picture-' + item.sortNo).offsetTop
          this.$bus.$emit('resetDetails' + this.eventId, this.details)
        } else if (this.type === 10) {
          // 辅助空白模块
          this.details.scrollNumber = this.$el.querySelector('#space-' + item.sortNo).offsetTop
          this.$bus.$emit('resetDetailsSpace' + this.eventId, this.details)
        } else if (this.type === 13) {
          // 商品模块
          this.details.scrollNumber = this.$el.querySelector('#goods-' + item.sortNo).offsetTop
          this.$bus.$emit('resetDetailsGoods' + this.eventId, this.details)
        } else if (this.type === 16) {
          // 视频模块
          this.details.scrollNumber = this.$el.querySelector('#video-' + item.sortNo).offsetTop
          this.$bus.$emit('resetDetailsVideo' + this.eventId, this.details)
        } else if (this.type === 14) {
          // 表单模块
          this.details.scrollNumber = this.$el.querySelector('#input-' + item.sortNo).offsetTop
          this.$bus.$emit('resetDetailsInput' + this.eventId, this.details)
        } else if (this.type === 17) {
          // 音频模块
          this.details.scrollNumber = this.$el.querySelector('#audio-' + item.sortNo).offsetTop
          this.$bus.$emit('resetDetailsAudio' + this.eventId, this.details)
        }
      },
      getdata(evt) {
        // 这里evt.draggedContext后续的内容根据具体的定义变量而定
      },
      datadragEnd(evt) {
        this.boxFormBoolean = false
        evt.preventDefault()
        const filters = this.listDetails
        for (let a = 0; a < filters.length; a++) {
          filters[a].index = a
          filters[a].sortNo = a
        }
        this.listDetails = filters
      },
      resetDetails() {
        this.details = {
          detailsId: '',
          templateId: '',
          sortNo: 0,
          authorType: 0,
          upperLowerMargins: 0,
          sideMargin: 0,
          backColor: '',
          textDTO: {
            textId: '',
            detailsId: '',
            content: '',
            textSize: '',
            textShape: '',
            textAlign: '',
            textColor: ''
          },
          pictureDTO: {
            pictureId: '',
            detailsId: '',
            imgUrl: '',
            imgWidth: '',
            imgHeight: ''
          },
          componentGoodsDTOS: [],
          audioDTO: {
            audioId: '',
            detailsId: '',
            title: '',
            subtitle: '',
            loopPlayback: '0',
            autoPlayback: '0',
            autoDuration: ''
          },
          componentVideoDTO: {
            videoId: '',
            detailsId: '',
            videoStyle: '1',
            videoImg: '',
            videoName: '',
            videoUrl: ''
          },
          formDTO: {
            componentFormId: '',
            detailsId: '',
            title: '联系我们',
            buttonName: '确定提交',
            buttonColor: '#409EFF',
            formDetailDTOS: []
          },
          sellType: '0',
          listStyle: '1'
        }
      },
      addMultiFiles(imageUrls) {
        if (!imageUrls || !imageUrls.length) {
          return
        }
        imageUrls.forEach(item => {
          if (!item.isError) {
            const obj = JSON.stringify(this.details)
            const details = JSON.parse(obj)
            details.detailsId = ''
            details.pictureDTO.imgUrl = item.imageUrl
            details.authorType = 12
            details.sortNo = this.listDetails.length
            details.index = this.listDetails.length
            details.sellType = '0'
            this.listDetails.push(details)
          }
        })
        this.dialogVisible = false
      },
      hideMultiFileUpload() {
        this.dialogVisible = false
      }
    }
  }
</script>


<style lang="less" scoped>
  .goods-default{
    background: #fe8096;
    min-height: 145px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .input-box{
    .diy-content{
      padding: 0 15px;
    }
    .input-show-bar{
      p{
        margin: 0;
        padding-bottom: 5px;
        text-align: left;
        font-weight: bold;
      }
    }
  }
  .sell-out{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 5;
    .out-bar{
      background: rgba(0, 0, 0, 0.5);
      border-top-left-radius: 5px;
      border-top-right-radius: 5px;
      color: #fff;
      font-size: 15px;
      text-align: center;
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 155px;
      z-index: 6;
      display: flex;
      justify-content: center;
      align-items: center;
      span{
        display: block;
        width: 210px;
        height: 210px;
        // background:url('@/../../assets/images/sold-out.png') no-repeat;
      }
    }
  }
  .main-box{
    min-height: 605px!important;
  }
  .diy-bg-main{
    position: relative;
    min-height: 865px;
  }
  .diy-bg-box{
    position: absolute;
    left: 0;
    top: 0;
    z-index: 5;
  }
  .diy-box{
    width: 100%;
    height: 605px;
    margin-top: 204px;
    overflow: auto;
    overflow-x: hidden;
    &.goods-diy-box{
      margin-top: 108px;
    }
    .diy-phone{
      position: relative;
      z-index: 10;
    }
    &::-webkit-scrollbar {
      width: 4px;
    }
    &::-webkit-scrollbar-thumb {
      border-radius: 10px;
      -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
      background: rgba(0,0,0,0.2);
    }
    &::-webkit-scrollbar-track {
      -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
      border-radius: 0;
      background: rgba(0,0,0,0.1);
    }
  }
  .diy-editor {
    position: absolute;
    left: 330px;
    top: 204px;
    width: 660px;
    height: auto;
    background: #fdfdfd;
    padding: 15px 10px;
    margin-left: 18px;
    border: 1px solid #ddd;
    border-radius: 5px;
    margin-top: 0px;
    display: block;
    min-height: 80px;
    &.text-editor{
      width: 610px;
    }
  }
  .diy-editor .editor-arrow {
    height: 0;
    position: relative;
  }
  .diy-editor .editor-arrow::after, .diy-editor .editor-arrow::before {
    position: absolute;
    font-family: simsun;
    content: "◆";
    top: 8px;
    left: -21px;
    display: block;
    width: 9px;
    height: 18px;
    font-size: 24px;
    color: rgb(253, 253, 253);
    z-index: 111;
  }
  .diy-editor .editor-arrow:after {
    left: -22px!important;
    color: #ddd!important;
    z-index: 11!important;
  }
  .diy-editor .editor-arrow::after, .diy-editor .editor-arrow::before {
    position: absolute;
    font-family: simsun;
    content: "◆";
    top: 8px;
    left: -21px;
    display: block;
    width: 9px;
    height: 18px;
    font-size: 24px;
    color: rgb(253, 253, 253);
    z-index: 111;
  }
  .panel-height{
    min-height: 130px;
  }
  .action-panel{
    background: #fff;
    border: 1px solid #ddd;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    position: fixed;
    left: 578px;
    bottom: 100px;
    width: 840px;
    z-index: 1002;
  }
  @media screen and (max-width: 1045px) {
    .action-panel{
      left: 398px;
    }
  }
  .diy-phone {
    float: left;
    width: 328px;
    // height: auto;
    border: 1px solid #ddd;
    border-radius: 10px;
    background: #fff;
    padding: 10px;
    overflow: hidden;
    &.none-border{
      border: none;
      background: none;
      padding: 0px 10px;
      border-radius: 0;
    }
  }
  .diy-phone .phone-head {
    height: 44px;
    background: #fff;
    position: relative;
  }
  .diy-phone .phone-head:before {
    content: "";
    position: absolute;
    top: 15px;
    left: 112px;
    height: 8px;
    width: 8px;
    background: #ddd;
    border-radius: 8px;
  }
  .diy-phone .phone-head:after {
    content: "";
    position: absolute;
    top: 15px;
    left: 128px;
    height: 8px;
    width: 50px;
    background: #ddd;
    border-radius: 8px;
  }
  .diy-phone .phone-title {
    height: 54px;
    background: url(../../../assets/images/wx-top.png) 0 0 no-repeat;
    background-size: 100% auto;
    padding: 0 50px;
    font-size: 15px;
    color: #333333;
    text-align: center;
    line-height: 68px;
    cursor: default;
    overflow: hidden;
    display: block;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .phone-t-info{
    h3{
      margin: 0;
      height: 51px;
      line-height: 1.4;
      font-size: 18px;
      overflow:hidden;
      text-overflow:ellipsis;
      display:-webkit-box;
      -webkit-line-clamp:2;
      -webkit-box-orient:vertical;
      word-break:break-word;
    }
    p{
      margin: 0;
      font-size: 12px;
    }
  }
  .diy-phone .phone-main {
    min-height: 280px;
    background: #f3f3f3;
    // border: 1px solid #ddd;
    // border-top: 0;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }
  .diy-phone .phone-foot {
    height: 24px;
    width: 60px;
    margin: 15px auto 5px;
    border: 1px solid #ddd;
    border-radius: 5px;
  }
  .tips-top {
    background: #d9edf7;
    color: #259fdc;
    border: #c5dce7 1px solid;
    font-size: 12px;
    border-radius: 5px;
    padding: 8px 0 8px 15px;
    width: 840px;
    margin-bottom: 30px;
    display: inline-block;
  }
  .pad-content {
    padding: 0 0 0 27px;
    .menu-panel{
      background: #fafafa;
      width: 280px;
      margin-right: 46px;
      .panel-m-title{
        font-size: 18px;
        line-height: 1;
        padding: 16px 0;
      }
      .one-simple{
        color: #989fac;
        padding: 8px 0;
      }
    }
  }
  .span-bar {
    padding: 0 50px;
  }
  .remove-btn {
    padding: 7px 6px !important;
  }
  .long-input {
    width: 80%;
  }
  .long-input-2 {
    width: 55%;
    margin-right: 5%;
  }
  .long-input-3 {
    width: 55%;
  }
  .short-input {
    width: 20%;
  }
  .short-input-2 {
    width: 25%;
  }
  .default-input {
    width: 50%;
  }
  .tips {
    color: gray;
    font-size: 12px;
    line-height: 1.2;
    padding-top: 5px;
  }
  .picture {
    width: 130px;
    height: 130px;
    display: block;
  }
  .pic-bar {
    position: relative;
    .close-icon {
      position: absolute;
      right: -30px;
      top: -11px;
      width: 31px;
      height: 40px;
      padding: 0 7px;
      cursor: pointer;
    }
    span {
      position: absolute;
      right: 0;
      bottom: 0;
      width: 100%;
      display: block;
      color: #fff;
      text-align: center;
      padding: 3px 0;
      background: rgba(0, 0, 0, 0.5);
      cursor: pointer;
    }
  }
  .pic-add {
    background: #fff;
    border: #d3d3d3 1px dashed;
    border-radius: 5px;
    padding: 0 45px;
  }
  .gds{
    font-weight: bolder;
    font-style: italic;
    text-decoration: none;
  }
  .drag-box{
    position: relative;
  }
  .drag {
    position: relative;
    min-height: 20px;
    height: auto;
    line-height: 1.3;
    display: block;
    overflow: hidden;
    &:after{
      content: '';
      display: block;
      clear: both;
      font-size: 0;
    }
  }
  .drag.selected:before, .drag:hover:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 2px dashed #00a0e9;
    cursor: move;
    z-index: 10;
  }
  .diy-content {
    min-height: 200px;
    display: block;
    margin: 0;
    padding: 0;
    height: auto;
    overflow: hidden;
    line-height: 1.3;
    background: #fff;
    text-align: center;
    &.text-valign-l{
      text-align: left!important;
      padding: 0 10px!important;
      .text-valign-c{
        text-align: center!important;
      }
    }
    &.picture-default{
      background: #81d5f9;
      min-height: 200px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    &.audio-box{
      min-height: auto;
      .audio-bar{
        text-align: left!important;
        background: #fcfcfc;
        border: #e0e0e0 1px solid;
        border-radius: 5px;
        font-size: 12px;
        color: #888888;
        margin: 20px 0px;
        img{
          margin-right: 15px;
        }
        h5{
          margin: 10px 0 5px 0;
          font-size: 14px;
          color: #333333;
          height: 20px;
          line-height: 1.3;
          overflow:hidden;
          text-overflow:ellipsis;
          display:-webkit-box;
          -webkit-line-clamp:1;
          -webkit-box-orient:vertical;
          word-break:break-word;
        }
        p{
          margin: 0;
          font-size: 12px;
          color: #999999;
        }
      }
    }
  }
  .diy-goods{
    text-align: left;
    margin-bottom: 10px!important;
    float: left;
    &.width-per-50{
      width: 48%;
      margin-left: 1%!important;
      margin-right: 1%!important;
      background: #fff;
    }
    &.width-per-100{
      background: #fff;
    }
    p{
      font-size: 14px;
      margin: 0 0 7px 0;
      padding: 0 10px;
      box-sizing: border-box;
      height: 30px;
      line-height: 30px;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical;
      word-break: break-word;
    }
    .price-bar{
      font-size: 14px;
      color: #ff3131;
      padding: 0 10px 10px 10px;
      height: 32px;
      label{
        border: #ff3131 1px solid;
        border-radius: 3px;
        padding: 0px 12px;
        height: 30px;
        line-height: 30px;
      }
    }
  }
  .btn-edit-del {
    height: 16px;
    position: absolute;
    right: 2px;
    bottom: 12px;
    display: block;
    z-index: 90;
    font-size: 14px;
  }
  .btn-edit-del > div {
    width: 32px;
    height: 16px;
    line-height: 16px;
    display: inline-block;
    text-align: center;
    font-size: 10px;
    color: #fff;
    background: rgba(0,0,0,.4);
    margin-left: 2px;
    cursor: pointer;
    position: relative;
    z-index: 11;
  }
</style>
